<template>
<div>
    <van-swipe @change="onChange" class="my-swipe">
      <van-swipe-item v-for="(image, index) in carouselList" :key="index">
        <img :src="getImgUrl(image.thumb)" />
      </van-swipe-item>
    </van-swipe>
    <router-link to="liuxue_news">
      <div class="news" >
      <div class="left_img">
        <img src="~@/assets/daily.png" alt="">
      </div>
      <div class="right_info">
        <ul   v-for="(news,index) in dailyNews" :key="index">
          <li @click="goToDetail(news.id)">{{news.title}}</li>
        </ul>
      </div>
    </div>
    </router-link>
</div>
</template>

<script>


export default {
  name: 'Carousel',
    props:{
        carouselList:Array,
        dailyNews:Array
    },
  data(){
    return{

  }
},
  methods:{
     goToDetail(id){
            console.log(id)
            this.$router.push({ path: "/newsDetail?id="+id, query:{id:id}});
        },
     
      onChange(){

      }
}

}
</script>

<style lang="less">
.news{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(42, 65, 84);
    font-size: 0.6rem;
    line-height: 0.95rem;
    padding: 0.75rem 0px;
    margin: 0px 0.75rem;
    border-bottom: 1px solid rgb(236, 236, 236);
  .left_img{
    width: 2.625rem;
    height: 1.475rem;
    margin-right: 0.5rem;
  }
  .right_info{
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.75rem;
    overflow: hidden;
    color: rgb(42, 65, 84);
    font-size: 0.6rem;
    line-height: 0.95rem;
    cursor: pointer;
    ul{
      list-style: disc !important;
        li{
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/* 超出部分显示省略号 */
            white-space: nowrap;
            width: 14rem;
        }
    }
  }
}
</style>
